// react程序入口
import React from 'react'
import ReactDOM from 'react-dom/client'
import '../src/styles/index.css'
const title = React.createElement('h1', null, 'hello react')
// 创建项目根实例 ReactDOM.createRoot
const root = ReactDOM.createRoot(document.getElementById('root'))
/**
 * 
 * React.createElement('标签名对象'，{属性名：属性值..},子元素1，子元素2...)
 */
const hello = React.createElement('h2', null, 'hi')
const li1 = React.createElement('li', null, '香蕉')
const li2 = React.createElement('li', null, '苹果')
const li3 = React.createElement('li', null, '橘子')
const ul = React.createElement('ul', { className: 'list' }, li1, li2, li3)
const demo = React.createElement('div', { className: 'demo' }, '这是一个React案例')
/**
 * jsx的使用
 * 1.元素必须是有效的
 * 2.特殊的属性 class改为className for改为htmlFor （for属性，使得label中的内容点击后也可以让单选框选中）
 * 一些复杂结构可以在外层加个()，防止打包时出错
 * 4.jsx创建的元素只能有一个根元素，外面必须报一下，幽灵节点<></> 不需要根元素的时候
 */
const ul2 = <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>
/**
 * jsx中使用插值表达式（类似vue的插值语法）
 * 语法{变量|js表达式（执行完有值）}
 * 不能直接绑定对象
 * 绑定函数时，显示return的值 函数也会执行
 */
let abc = 123
let stu = {
  name: 'wx'
}
let arr = [1, 2, 3]
let fn = () => {
  console.log(456)
  return abc
}
let fn2 = () => {
  console.log(456)
  return <h1>hi</h1>
}

const box = (
  <ul>
    <li>{abc}</li>
    {/* let av =123 */}
    <li>{abc + 1}</li>
    <li>{1 + 1}</li>
    <li>{abc > 10 ? '大于10' : '小于10'}</li>
    <li>{stu.name}</li>
    <li>{arr}</li>
    <li>{arr[1]}</li>
    <li>{fn()}</li>
    <li>{fn2()}</li>
    <li><span style={{ color: 'red', backgroundColor: 'pink' }}>11</span></li>
    <li></li>
  </ul >
)
/**
 * jsx
 * 1.if/else语句
 * 2.三元表达式
 * 3.逻辑与 &&
 */
const isLoad = (loading) => {
  if (loading) {
    return <div>
      正在加载
    </div>
  }
  else {
    return <div>
      加载完成
    </div>
  }
}
const box2 = (<>
  <div>
    {isLoad()}
  </div>
  <div>
    {true ? <div>
      加载中
    </div> : <div>
      加载完成
    </div>}
  </div>
  <div>
    {true && <div>
      加载完成
    </div>}
  </div>
</>)
/**
 * 列表渲染
 * 用foreach遍历
 * 
 */
const songs = [
  { id: 1, name: '痴心绝对' },
  { id: 2, name: '像我这样的人' },
  { id: 3, name: '南山南' }
]
const forSongs = () => {
  const _list = []
  songs.forEach((item, index, array) => {
    _list.push(<li key={item.id}>第{item.id}首歌:{item.name}</li>)
  })
  return _list
}
const List = (<div>
  {forSongs()}
</div>)
const mapList = songs.map((item, index, array) => { return <li key={item.id}>{item.name}</li> })
const MapList = (<div>
  {/* 加了花括号就要有return */}
  <ul>
    {mapList}
  </ul>
</div>)
const list = [
  { id: 1, name: '黑马86期', salary: 11000 },
  { id: 2, name: '黑马87期', salary: 12000 },
  { id: 3, name: '黑马88期', salary: 18000 }
]
const SalaryList = list.map((item, index, array) => { return <li key={item.id} style={{ color: 'red' }}><h3 style={{ border: '1px solid green ' }}>班级:{item.name}</h3><p className='box'>工资:{item.salary}</p></li> })
const salaryList = (<div>
  <ul>
    {SalaryList}
  </ul>
</div>)
/**
 * 控制样式
 * 1.行内式{{}} 遇见-写成驼峰
 */
// 记得要用<div></div>或者幽灵语法包起来
root.render(
  // title,
  // hello
  // ul
  // demo
  // ul2
  // box
  // box2
  // List
  // MapList
  salaryList
)
// root.render(ul) 这样会覆盖之前的rendor


